<template>
    <van-tabbar :value="active">
        <van-tabbar-item v-for="(item,index) in tabList" :key="index" :info="item.num == 0 ? '' : item.num" :to="item.route">
            <span>{{item.label}}</span>
            <img slot="icon" slot-scope="props" :src="props.active ? item.icon.active : item.icon.normal">
        </van-tabbar-item>
    </van-tabbar>
</template>
<style scoped></style>
<script>
import { Tabbar, TabbarItem } from 'vant'
    export default{
        components:{
            [Tabbar.name]:Tabbar,
            [TabbarItem.name]:TabbarItem
        },
        data(){
            return {
                tabList:[{
                    name:'Current',
                    label:'本期',
                    icon:{
                        normal: require('@/assets/images/tab1.png'),
                        active: require('@/assets/images/tab1-press.png'),
                    },
                    num:0,
                    route:{name:'Current'}
                },{
                    name:'Prior',
                    label:'上期',
                    icon:{
                        normal: require('@/assets/images/tab2.png'),
                        active: require('@/assets/images/tab2-press.png'),
                    },
                    num:0,
                    route:{name:'Prior'}
                },{
                    name:'Info',
                    label:'我的',
                    icon:{
                        normal: require('@/assets/images/tab3.png'),
                        active: require('@/assets/images/tab3-press.png'),
                    },
                    num:0,
                    route:{name:'Info'}
                }]
            }
        },
        mounted(){

        },
        filters:{},
        computed:{
            active(){
                return this.$route.meta.index
            }
        },
        methods:{},
        watch:{}
    }
</script>